<template>
  <div class="search">
    <div class="search-header g-inline">
      <el-input
        placeholder="请输入HI账号 / 手机号 / 关键字"
        v-model="option"
        @keyup.enter.native="handleFriendsSearch"
      >
      </el-input>
      <el-button
        class="search-btn"
        type="primary"
        :loading="searchLoading"
        @click="handleFriendsSearch"
      >
        查找
      </el-button>
    </div>
    <div class="search-result">
      <div
        v-for="(user, index) in results"
        :key="index"
        class="result-item"
      >
        <div class="result-card">
          <img
            class="avatar"
            :src="defaultAvatar(user)"
          />
          <div class="friend-info">
            <div class="name">
              {{defaultNickname(user)}}
            </div>
            <div class="sex">
              {{defaultSex(user.sex)}}
            </div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="handleApplyAddFriendClick(user)"
            >
              加好友
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <form-dialog
      title="添加好友"
      :visible.sync="applyAddFriendFormVisible"
      :appendToBody="true"
    >
      <add-friend-form
        ref="addFriend"
        :user="currentUser"
        :organizationId="organizationId"
        @cancel="handleAddFriendCancel"
        @submit="handleAddFriendSubmit"
      />
    </form-dialog>
  </div>
</template>

<script>
import { friendsSearch } from '@/api/social'
import AddFriendForm from './AddFriendForm'
export default {
  name: 'SearchFriendForm',
  components: {
    AddFriendForm
  },
  props: {
    organizationId: {
      required: false
    }
  },
  data () {
    return {
      applyAddFriendFormVisible: false,
      option: '',
      results: [],
      currentUser: null,
      searchLoading: false
    }
  },
  methods: {
    reset () {
      this.option = ''
      this.results = []
    },
    defaultAvatar (user) {
      return user.avatar || this.$const.DEFAULT_PICTURE
    },
    defaultNickname (user) {
      return user.userName || user.loginName || user.phonenumber || '未命名'
    },
    defaultSex (sex) {
      switch (sex) {
        case '0':
          return '男'
        case '1':
          return '女'
        default:
          return '保密'
      }
    },
    // 搜索好友
    async handleFriendsSearch () {
      try {
        if (!this.option) {
          this.$message.warning('查找内容不能为空')
          return
        }
        this.searchLoading = true
        const { data } = await friendsSearch(this.option)
        this.searchLoading = false
        this.results = data
      } catch {
        this.searchLoading = false
      }
    },
    // 申请添加好友
    // 点击申请
    async handleApplyAddFriendClick (user) {
      this.currentUser = user
      this.applyAddFriendFormVisible = true
      await this.$nextTick()
      this.$refs.addFriend.reset()
    },
    // 取消添加
    handleAddFriendCancel () {
      this.applyAddFriendFormVisible = false
    },
    // 提交添加
    handleAddFriendSubmit () {
      this.applyAddFriendFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  .search-header {
    .search-btn {
      margin-left: 10px;
      width: 180px;
    }
  }
  .search-result::-webkit-scrollbar {
    display: none;
  }
  .search-result {
    margin-top: 20px;
    height: 420px;
    overflow: auto;
    .result-item {
      width: 225px;
      height: 100px;
      margin-bottom: 20px;
      box-sizing: border-box;
      float: left;
      .result-card {
        margin: auto;
        height: 100px;
        display: flex;
        align-items: center;
        .avatar {
          width: 80px;
          height: 80px;
          margin-right: 10px;
        }
        .friend-info {
          height: 80px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          .name {
            font-size: 18px;
            font-weight: bold;
            width: 125px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .sex {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
